<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>table表格</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h5>1.基本实例(.table)</h5>
    <table class="table">
        <thead>
        <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>

    <br>
    <h5>2.条纹状表格(.table-striped)</h5>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>

    <br>

    <h5>3.带边框的表格(.table-bordered)</h5>
    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>

    <br>
    <h5>4.鼠标悬停(.table-hover)</h5>
    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>

    <br>
    <h5>5.紧缩表格(.table-condensed)</h5>
    <!--通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。-->
    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        </tbody>
    </table>

    <br>
    <h5>6.状态类(可针对行或单元格.active,.success,.info,.warning,.danger)</h5>
    <!--通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。-->
    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
        </tr>
        </thead>

        <tbody>
        <tr class="active">
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr class="success">
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr class="info">
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr class="warning">
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr class="danger">
            <td>表格内容</td>
            <td>表格内容</td>
            <td>表格内容</td>
        </tr>
        <tr>
            <td class="success">表格内容</td>
            <td class="warning">表格内容</td>
            <td class="danger">表格内容</td>
        </tr>
        </tbody>
    </table>

    <br>
    <h5>7.响应式表格(.table-responsive)</h5>
    <!--将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。
    当屏幕大于 768px 宽度时，水平滚动条消失-->
    <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th>表格标题</th>
                <th>表格标题</th>
                <th>表格标题</th>
            </tr>
            </thead>

            <tbody>
            <tr>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
            <tr>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
            <tr>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
            <tr>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
            <tr>
                <td>表格内容</td>
                <td>表格内容</td>
                <td>表格内容</td>
            </tr>
            </tbody>
        </table>
    </div>
    <br>

</div>
</body>
</html>